<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map id="myMap" style="width: 100%; height: 600upx;" show-location  :latitude="latitude" :longitude="longitude" :markers="markers" @callouttap="calloutCilck">
				</map>
			</view>
			<button @tap="geocode()">转化地址为坐标系</button>
			<button @tap="getLocation()">定位</button>
			<button @tap="calculateDistance()">计算距离</button>
			<button type="primary" @tap="daoHang()">导航</button>
		</view>
	</view>
</template>

<script>
	import {GETLOCATION,OPENSYSMAP,CONVERTCOORDINATES} from "../../common/utlis/app-plus-utils"
	export default {
		data() {
			return {
				title: 'map',
				latitude: 0,
				longitude: 0,
				markers:[],
				myLocation:{},
				endLocation:{}
			}
		},
		mounted(){
			uni.showLoading({
				title: '地图努力加载中'
			});
			setTimeout(()=>{
				this.latitude= 23.147305;
				this.longitude= 113.258743;
				this.markers.push({id:1,latitude:this.latitude,longitude:this.longitude,iconPath:'../../static/map-marker-radius.png',
				callout:{
					content:'文本内容啊',
					display:'ALWAYS'
					},
					label:{
						content:'这是label啊'
					}
					});
					uni.hideLoading();
			},1000);
		},
		methods: {
			calloutCilck(e){
				console.log("callouttap触发了: " + JSON.stringify(e));
			},
			// 封装通过地址信息解析成坐标
			geocode(){
				let mapContext = uni.createMapContext('myMap',this);
				plus.maps.Map.geocode('广东-深圳-福田区-天安云谷',{
					coordType:'wgs84'
				},(res)=>{
					console.log("地址解析成坐标: " + JSON.stringify(res));
					this.latitude=res.coord.latitude;
					this.longitude=res.coord.longitude;
					this.endLocation = {
						latitude:res.coord.latitude,
						longitude:res.coord.longitude,
					}
					mapContext.translateMarker({
						destination:{
							latitude:res.coord.latitude,
							longitude:res.coord.longitude,
						},
						markerId:1,
						autoRotate:true,
						rotate:20,
						duration:5000
					})
				},function(err){
					console.log("解析错误err: " + JSON.stringify(err));
				})
			},
			// 获取定位信息
			async getLocation(){
				let mapContext = uni.createMapContext('myMap',this);
			 	let res= await GETLOCATION('wgs84');
				console.log("定位信息: " + JSON.stringify(res));
				this.myLocation = {latitude:res.latitude,longitude:res.longitude}
				mapContext.moveToLocation();
				//添加定位成功的覆盖物
			},
			calculateDistance(){
				this.geocode();
				plus.maps.Map.calculateDistance(this.myLocation,{latitude:this.latitude,longitude:this.longitude},
				(res)=>{
					console.log("计算成功: " + JSON.stringify(res));
				},
				(err)=>{
					console.log("计算失败触发: " + JSON.stringify(err));
				}
				)
			}, 
			daoHang(){
				console.log("endLocation: " + JSON.stringify(this.endLocation));
				console.log("startPoint: " + JSON.stringify(this.myLocation));
				OPENSYSMAP(this.endLocation,'广东-深圳-福田区-天安云谷',this.myLocation); 
			}
		}
	}
</script>

<style>

</style>
